<template>
  <!-- 产品中心菜单 -->
  <div>
    <div class="productCenterPc">
      <div class="list">
        <div
          :class="active == index ? 'item-active' : 'item'"
          v-for="(item, index) in list"
          :key="item"
          @click="tabHealth(index)"
          @mouseenter="tabClick(index)"
        >
          <!-- <img
            class="semicircle"
            src="../assets/image/product/semicircle.png"
          /> -->
          <div class="text">
            <div class="name"><span v-if="active == index && item.linkurl">去</span>{{ item.name }}</div>
            <div class="en">{{ item.nickname }}</div>
          </div>
          
          <!-- <img v-if="health ==2"
            class="ic"
            :src="item.image[1]"
          /> -->
          <img
          v-if="health !=2"
            class="ic"
            :src="active == index ? item.image[0] : item.image[1]"
          />
        </div>
      </div>
    </div>

    <div class="productCenterMobile">
      <div class="list">
        <div
          :class="active == index ? 'item-active' : 'item'"
          v-for="(item, index) in list"
          :key="item"
          @click="tabHealth(index)"
        >
          <!-- <img
            class="semicircle"
            src="../assets/image/product/semicircle.png"
          /> -->
          <div class="text">
            <div class="name">{{ item.name }}</div>
            <div class="en">{{ item.nickname }}</div>
          </div>
          <img
            class="ic"
            :src="active == index ? item.image[0] : item.image[1]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
    },
    i: Number,
  },
  watch: {
    i(newData) {
      this.active = newData;
    },
  },
  data() {
    return {
      active: 0,
      health : 1,
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {
      /**
     * 特殊处理大健康
     */
     tabHealth(e) {
      //大健康
      if (e == 2) {
        window.open(this.list[e].linkurl);
        // this.active = e;
       
      } else {
        this.active = e;
        this.health == 1;
        if ((e == 0)) {
          this.$router.push({
            name: "productCenter",
          });
        }
        if (e == 1) {
          this.$router.push({
            name: "productCenterChildren",
            // query: { index: 1 },
          });
        }
        // this.$emit("change", e);
      }
      
    },
    /**
     * 点击事件
     */
    tabClick(e) {
      //大健康
      if (e == 2) {
        // window.open(this.list[e].linkurl);
        this.active = e;
       
      } else {
        this.active = e;
        this.health == 1;
        if ((e == 0)) {
          this.$router.push({
            name: "productCenter",
          });
        }
        if (e == 1) {
          this.$router.push({
            name: "productCenterChildren",
            // query: { index: 1 },
          });
        }
        // this.$emit("change", e);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .productCenterMobile {
    display: none;
  }

  .productCenterPc {
    @include fn.container;
    height: 96px;
    background: #ffffff;
    box-shadow: 0px 2px 38px 0px rgba(0, 0, 0, 0.08);

    .list {
      @include fn.container;
      height: 96px;
      display: flex;
      justify-content: space-between;

      .line {
        width: fn.rpx(1);
        height: fn.rpx(47);
        background: #f6f6f6;
      }

      .item-active {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        display: flex;
        width: 400px;
        height: 96px;
        align-items: center;
        justify-content: space-between;
        border-width: 2px;

        border-bottom: solid color.$base;

        .semicircle {
          z-index: 1;
          top: 15px;
          left: 50px;
          width: 52px;
          height: 52px;
          position: absolute;
        }

        .text {
          margin-left: 87px;
          display: flex;
          flex-direction: column;

          .name {
            font-size: 20px;
           
            font-weight: 400;
            color: color.$base;
            line-height: 20px;
          }

          .en {
            margin-top: 8px;
            font-size: 16px;
           
            font-weight: 300;
            color: color.$base;
            line-height: 20px;
          }
        }

        .ic {
          margin-right: 30px;
          width: 50px;
          height: 50px;
        }
      }

      .item {
        position: relative;
        cursor: pointer;
        display: flex;
        width: 400px;
        height: 96px;
        align-items: center;
        justify-content: space-between;

        &:hover{
          box-sizing: border-box;
        position: relative;
        cursor: pointer;
        display: flex;
        width: 400px;
        height: 96px;
        align-items: center;
        justify-content: space-between;
        border-width: 2px;

        // border-bottom: solid color.$base;

        .semicircle {
          z-index: 1;
          top: 15px;
          left: 50px;
          width: 52px;
          height: 52px;
          position: absolute;
        }

        .text {
          margin-left: 87px;
          display: flex;
          flex-direction: column;

          .name {
            font-size: 20px;
           
            font-weight: 400;
            color: color.$base;
            line-height: 20px;
          }

          .en {
            margin-top: 8px;
            font-size: 16px;
           
            font-weight: 300;
            color: color.$base;
            line-height: 20px;
          }
        }

        .ic {
          margin-right: 30px;
          width: 50px;
          height: 50px;
        }
        }

        .semicircle {
          display: none;
        }

        .text {
          margin-left: 87px;
          display: flex;
          flex-direction: column;

          .name {
            font-size: 20px;
           
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }

          .en {
            margin-top: 8px;
            font-size: 16px;
           
            font-weight: 300;
            color: #666666;
            line-height: 20px;
          }
        }

        .ic {
          margin-right: 30px;
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .productCenterPc {
    display: none;
  }

  .productCenterMobile {
    width: 100%;
    height: fn.rpx(96);
    background: #ffffff;
    box-shadow: 0px 2px 38px 0px rgba(0, 0, 0, 0.08);

    .list {
      width: 100%;
      height: fn.rpx(96);
      display: flex;
      justify-content: space-between;

      .item-active {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        display: flex;
        width: fn.rpx(250);
        height: fn.rpx(96);
        align-items: center;
        justify-content: space-between;
        border-width: fn.rpx(2);

        border-bottom: solid color.$base;

        .semicircle {
          z-index: 1;
          top: fn.rpx(15);
          left: fn.rpx(10);
          width: fn.rpx(52);
          height: fn.rpx(52);
          position: absolute;
        }

        .text {
          margin-left: fn.rpx(30);
          display: flex;
          flex-direction: column;

          .name {
            font-size: fn.rpx(20);
           
            font-weight: 400;
            color: color.$base;
            line-height: fn.rpx(20);
          }

          .en {
            margin-top: fn.rpx(8);
            font-size: fn.rpx(14);
           
            font-weight: 300;
            color: color.$base;
            line-height: fn.rpx(20);
          }
        }

        .ic {
          margin-right: fn.rpx(10);
          width: fn.rpx(50);
          height: fn.rpx(50);
        }
      }

      .item {
        position: relative;
        cursor: pointer;
        display: flex;
        width: fn.rpx(250);
        height: fn.rpx(96);
        align-items: center;
        justify-content: space-between;

        .semicircle {
          display: none;
        }

        .text {
          margin-left: fn.rpx(30);
          display: flex;
          flex-direction: column;

          .name {
            font-size: fn.rpx(20);
           
            font-weight: 400;
            color: #666666;
            line-height: fn.rpx(20);
          }

          .en {
            margin-top: fn.rpx(8);
            font-size: fn.rpx(14);
           
            font-weight: 300;
            color: #666666;
            line-height: fn.rpx(20);
          }
        }

        .ic {
          margin-right: fn.rpx(10);
          width: fn.rpx(50);
          height: fn.rpx(50);
        }
      }
    }
  }
}
</style>